import React, { useState } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import {
  Route,
  Switch,
  Link,
  HashRouter,
  useHistory,
  useLocation,
  MemoryRouter as Router,
} from 'react-router-dom'
import {
  FileOutline,
  TravelOutline,
  PlayOutline,
  VideoOutline,
  UserOutline,
} from 'antd-mobile-icons'

import styles from '../xialan.css'
import Xinwen from '../renmin/xinwen'
import Renminhao from '../renmin/renminhao'
import Shipin from '../renmin/shipin'
import Zhibo from '../renmin/zhibo'
import Wode from '../renmin/wode'



const Bottom = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location

  const setRouteActive = (value) => {
    history.push(value)
  }

}

export default () => {


  const [index,setIndex] = useState('新闻')

  const tabs = [
    {
      key: '/xinwen',
      title: '新闻',
      icon: <FileOutline />,
    },
    {
      key: '/renminhao',
      title: '人民号',
      icon: <TravelOutline />,
      
    },
    {
      key: '/message',
      title: '视频',
      icon: <PlayOutline />,
    },
    {
      key: '/zhibo',
      title: '直播',
      icon: <VideoOutline />,
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  return (
  
      <div className={styles.app} id='xialan'>

        {/* <div className={styles.body}> */}
  
         { index==="新闻" &&    <Xinwen /> } 

         { index==="人民号" &&     <Renminhao /> } 

         { index==="视频" &&     <Shipin /> } 

         { index==="直播" &&     <Zhibo /> } 

         { index==="我的" &&     <Wode /> } 

        
        {/* </div> */}
        <div className={styles.bottom}>

        <TabBar  onChange={value => setIndex(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.title} icon={item.icon} title={item.title} />
            
          ))}
        </TabBar>
        </div>
      </div>

  )
}

